.objective-KR-content {
  position: relative;
  padding: 0 24px 0 60px;

  .objective-KR-order-move {
    position: absolute;
    top: 17px;
    left: 36px;
    color: #646a73;
    cursor: move;
    z-index: 1;
    visibility: hidden;
  }

  .objective-KR-wrap {
    display: flex;
    border-top: 1px solid hsla(213,7%,75%,.5);
  }

  .objective-KR-editor-wrap {
    color: #1f2329;
    flex: 1 1;
    margin-right: 36px;
    min-width: 0;
    padding: 12px 0;
    position: relative;

    ::v-deep .citem {
      line-height: 1.9;
    }
  }

  .kr-set {
    display: flex;
    flex: 0 0 auto;
    height: 46px;
    align-items: center;
  
    .kr-set-title {
      color: #8f959e;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
    }
  
    .kr-set-content {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 4px;
      // width: 55px;
      height: 32px;
      line-height: 30px;
      font-size: 14px;
      color: #646a73;
      cursor: default;
  
      ::v-deep {
        // .mds-input {
        //   width: 100%;
        //   height: 32px;
        //   padding: 4px 22px 4px 8px;
        // }
  
        .mds-date-editor {
          .mds-input {
            width: 64px;
            padding: 6px;
            text-align: center;
          }
          .mds-input-suffix {
            display: none;
          }
        }
  
        & > .mds-btn {
          color: #8f959e;
          padding: 0 !important;
          margin-left: 10px;
  
          &:hover {
            color: #3370ff;
          }
        }
      }
  
      .tip-arrow {
        position: absolute;
        left: 79px;
        bottom: 0;
        width: 12px;
        height: 12px;
  
        &::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -6px;
          box-sizing: border-box;
          border-color: transparent;
          border-style: solid;
          border-width: 6px 6px 0;
          border-top-color: #fff;
        }
  
        &::after {
          content: "";
          position: absolute;
          left: -1px;
          top: 12px;
          z-index: -1;
          box-sizing: border-box;
          border-color: transparent;
          border-style: solid;
          border-width: 7px 7px 0;
          border-top-color: #dee0e3;
        }
      }
      
      .weight-tip {
        color: red;
        position: absolute;
        width: 170px;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        line-height: 46px;
        top: -57px;
        background-color: #fff;
        z-index: 2;
        user-select: none;
        box-shadow: 0 6px 12px 0 rgba(31,35,41,0.1);
      }
  
      .delete-kr-tip {
        position: absolute;
        bottom: 30px;
        right: -22px;
        width: 250px;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        background-color: #fff;
        z-index: 2;
        user-select: none;
        box-shadow: 0 6px 12px 0 rgba(31,35,41,0.1);
        padding: 12px 16px;
        color: #383c41;
        text-align: left;
  
        .mdsicon {
          font-size: 15px;
          margin-right: 8px;
        }
  
        .tip-arrow {
          left: initial;
          right: 25px;
        }
  
        .delete-kr-op {
          margin-top: 16px;
          font-size: 14px;
          text-align: right;
  
          .mds-btn {
            font-size: 12px;
            height: 28px;
            line-height: 20px;
            min-width: 48px;
            padding: 3px 7px;
            color: #383c41;

            i {
              margin: 0;
            }
  
            &:hover {
              background-color: #eee;
              border-color: #d9d9d9;
            }
  
            &:last-child {
              color: #f54a45;
              border-color: #f54a45;
  
              &:hover {
                background-color: rgb(255, 233, 233);
              }

              &.mds-btn-loading {
                color: #d9d9d9;
                border-color: #d9d9d9;
                background-color: transparent;
              }
            }
          }
        }
      }
    }
  
    .kr-set-item {
      // width: 50px;
      text-align: center;
      padding: 0 5px;
  
      ::v-deep {
        .mds-progress-circle {
          width: 18px !important;
          height: 18px !important;
        }
  
        .okr-progress {
          width: 40px;
          height: 32px;
        }

        .kr-set-score {
          width: 42px;
          padding: 0 8px;
          text-align: left;
          color: #354052;
          border-color: transparent;
          margin-left: 2px;
      
          &:hover {
            border-color: #ccc;
            cursor: pointer;
          }
      
          &:focus {
            border-color: #3f89ff;
            cursor: text;
          }
        }
      }
    }
  }

  .citem {
    line-height: 1.8 !important;
  }
}

.KR-item:hover {
  .objective-KR-order-move {
    visibility: visible;
  }
}